
import { useCallback, useRef, useEffect, useState } from 'react';
import { Map } from '@uiw/react-amap-map';
import { Marker } from '@uiw/react-amap-marker'
import AMap from 'AMap'
import './index.scss'
import { Typography } from '@mui/material';
const Maps = () => {

  const [szWether, setSzWether] = useState('')

  const mapRef = useRef(null)
  const mapComplete = useCallback(() => {
    mapRef.current.map.setFitView()
  }, [])

  useEffect(() => {
    //创建天气查询实例
    let weather = new AMap.Weather();
    weather.getLive('苏州市', function(err, data) {
      console.log(err, data);
      if (data) {
        setSzWether(data.weather)
      }
    });
  }, [])

  return (
    <div className="mapsPage">
      <Map ref={mapRef} onComplete={() => mapComplete()}>
        <Marker
          visiable={true}
          title="苏州市"
          label={{
            // 设置文本标注内容
            content: "<div class='info'>我是 marker 的 label 标签</div>",
            // 设置文本标注方位
            direction: 'right'
          }}
          position={[120.65,31.31]}
        />
      </Map>
      <Typography style={{position: 'absolute', top: '10px', left: '10px', color: '#000'}}>拿到天气证明成功引入AMap对象，苏州当前天气：{szWether}</Typography>
    </div>
  )
}

export default Maps